<template>
    <div class="plLiang">
        <el-upload v-model:file-list="fileList" class="upload-demo"
            :action="url+paramsCanshu" multiple :on-preview="handlePreview"
            :on-remove="handleRemove"  :on-success="handleSuccess" >
            <el-button type="primary">批量导入</el-button>

        </el-upload>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import domainsFuc from '~/request/domains'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
    // {
    //     name: 'element-plus-logo.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
    // {
    //     name: 'element-plus-logo2.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
])
const props = defineProps({
    paramsCanshu: {
        default: '',
        type:String
    }
})
const emit = defineEmits(['getData'])
const url=domainsFuc(process.env.NODE_ENV).domain
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
}
const handleSuccess:UploadProps['onSuccess'] = (uploadFile) => {
    // console.log(uploadFile)
    // 上传成功
    // 调动父组件中的方法
    emit('getData')
}
</script>

<style  lang="scss">
.plLiang {
    .el-upload-list {
        display: none;
    }
}

.upload-demo {
    margin-left: 20px;

    .el-button {
        width: 90px;
        height: 34px;
        background: #F8F8F8;
        border: 1px solid #3244DE;
        border-radius: 4px;

        color: #3244DE;
    }

}
</style>